<template>
  <div>
    <div id="scrollArea">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          v-for="cls in columns"
          :prop="cls.prop"
          :key="cls.prop"
          :label="cls.title"
          :width="cls.width">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['tableData', 'columns'],
    name: "GridView",

    mounted() {
      setTimeout(() => {
        var clusterize = new Clusterize({
          rows: document.querySelectorAll('.el-table__row'), // 类 el-table__row
          scrollElem: document.getElementById('scrollArea'), //#scrollArea
          contentElem: document.querySelector('.el-table__body tbody')  //.el-table__body tbody
        });

        console.log(clusterize.getRowsAmount())


      }, 1000)
    }
  }
</script>

<style scoped>

  #scrollArea {
    height: 500px;
    overflow-y: auto;

  }
</style>
